<template>
  <div class="platformDataPage">
    <a-row :gutter="16" style="margin-bottom: 20px">
      <a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" :xxl="4">
        角色：<a-select
          v-model="queryParams.roleType"
          @change="changeRoleType"
          style="width: 120px"
          allowClear
          :placeholder="$t('pleaseSelectRole')"
        >
          <a-select-option v-for="item in roleOptions" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select></a-col
      >
      <a-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9" :xxl="9">
        查询周期：<a-range-picker
          :value="dateRange"
          :getCalendarContainer="showToBody()"
          :placeholder="[$t('startTime'), $t('endTime')]"
          @change="handlerChangeRange"
          :disabledDate="disabledCreatedDate"
          :allow-clear="true"
        />
      </a-col>
      <a-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" :xxl="4">
        图表步长：<a-select
          v-model="queryParams.stepSize"
          @change="changeStepSize"
          style="width: 120px"
          placeholder="请选择步长"
        >
          <a-select-option v-for="item in stepSizeOptions" :key="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :xxl="3">
        <a-button type="primary" @click="handleSearch">
          <i class="iconfont icon-chazhao"></i>
          {{ $t('inquiry') }}
        </a-button>
      </a-col>
    </a-row>

    <a-row :gutter="[20, 20]">
      <a-col :span="12" v-for="item in LineEKeys" :key="item.id">
        <div class="borderWithRadius linePDiv">
          <line-echart :otherOptions="item" ref="lineEchartDom"></line-echart>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from 'moment'
import LineEchart from './components/LineEchart.vue'
import { mapState } from 'vuex'
import message from 'ant-design-vue/es/message'

export default {
  components: {
    LineEchart,
  },
  computed: {
    //查询参数
    ...mapState({
      queryParams: (state) => state.statisticsPlatformData.queryParams,
      status: (state) => state.statisticsPlatformData.status,
    }),
    //时间区间数组
    dateRange() {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    },
  },
  data() {
    return {
      roleOptions: [],
      //步长
      stepSizeOptions: [
        { id: 0, name: 1 },
        { id: 1, name: 3 },
        { id: 2, name: 5 },
        { id: 3, name: 14 },
        { id: 4, name: 30 },
        { id: 5, name: 90 },
      ],
      //哪类数据的折线图
      LineEKeys: [
        {
          id: 'yhzz',
          text1: '用户增长',
          text2: '', //'234,23'
          text3: '人',
          legendData: ['增长量', '累计量'],
          xAxisName: '时间',
          yAxisName: '人数',
        },
        {
          id: 'rws',
          text1: '任务数',
          text2: '',
          text3: '个',
          legendData: ['任务数'],
          xAxisName: '时间',
          yAxisName: '任务数',
        },
        {
          id: 'ptsysc',
          text1: '平台使用时间',
          text2: '',
          text3: '小时',
          legendData: ['平台使用时间'],
          xAxisName: '时间',
          yAxisName: '小时',
        },
        {
          id: 'OTAcl/tjs',
          text1: 'OTA车辆/台架数',
          text2: '',
          text3: '台',
          legendData: ['车辆/台架数'],
          xAxisName: '时间',
          yAxisName: '台数',
        },
        {
          id: 'OTArjzzs',
          text1: 'OTA软件增长数',
          subtext1: '从2020年9月20日更新至2023年9月24日',
          text2: '34,533',
          text3: '个',
          legendData: ['OTA软件增长数'],
          series1Data: [150, 230, 224, 218, 135, 147, 260],
          xAxisName: '时间',
          xAxisData: ['1', '2', '3', '4', '5', '6', '7'],
          yAxisName: '增长数',
        },
      ],
    }
  },
  created() {
    //获取角色
    this.$api.getRoleAllData().then((res) => {
      this.roleOptions = res.data
    })
  },
  methods: {
    // 日期选择
    handlerChangeRange(date, dateString) {
      this.status.lineStatus = 0
      this.queryParams.startTime = dateString[0]
      this.queryParams.endTime = dateString[1]
      //可以调用搜索
      this.handleSearch()
    },
    // 日期选择的禁选日期
    disabledCreatedDate(current) {
      return current && current > moment().endOf('day')
    },
    //改变角色类型
    changeRoleType(val) {
      //  console.log(val)
      this.queryParams.roleType = val
      console.log(11111, val)
      this.status.lineStatus = 0
      this.handleSearch()
    },
    //改变步长
    changeStepSize(val) {
      this.queryParams.stepSize = val
      this.handleSearch()
    },
    showToBody() {
      return () => document.body
    },
    //搜索
    handleSearch() {
      if (!this.queryParams.roleType) {
        this.status.lineStatus = 3
        console.log('this.status.lineStatus', this.status.lineStatus)
        message.error('请选择角色后，再查询')
      } else if (!this.queryParams.startTime) {
        this.status.lineStatus = 3
        message.error('请查询周期后，再查询')
      }
      this.LineEKeys.forEach((item, index) => {
        this.$refs.lineEchartDom[index].getData(true)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.platformDataPage {
  padding: 32px 24px;
  overflow-y: auto;
}

@border: 1px solid @borderColor;
.borderWithRadius {
  border: @border;
  border-radius: @border-radius-base;
}
.linePDiv {
  height: 289px;
  margin-top: 10px;
}
</style>
